<template>
    <div class="container">
        <div style="width: 70%;margin: auto;">
            <el-card>
                <div slot="header" style="text-align: center;">
                    <h3 style="margin: 3px">{{ bookDetail.name }}</h3>
                </div>
                <div style="display: flex;height: 250px;">
                    <div style="width: 20%">
                        <img :src="bookDetail.imageUrl" style="width: 225px;height: 250px">
                    </div>
                    <div style="border:solid;border-width: 1px;border-color: #EBEEF5">

                    </div>
                    <div style="width: 40%;margin-left: 50px">
                        <p>书名：<span>{{ bookDetail.name }}</span></p>
                        <p>作者：<span>{{ bookDetail.author }}</span></p>
                        <p>出版社：<span>{{ bookDetail.press }}</span></p>
                        <p>定价：<span>{{ bookDetail.price }}￥</span></p>
                        <p>库存：<span>{{ bookDetail.storeMount }}</span></p>
                        <el-button-group>
                            <el-button size="small" plain type="primary" @click="addtoCart(bookDetail.bookId)">加入购物车
                            </el-button>
                            <el-button size="small" plain type="danger" @click="beginBuy()">直接购买</el-button>
                        </el-button-group>
                    </div>
                    <div style="width: 40%">

                    </div>
                </div>
                <el-divider>
                    <h4>图书简介</h4>
                </el-divider>
                <div>
                    <p>{{ bookDetail.detail }}</p>
                </div>
                <el-divider>
                    <h4>更多推荐</h4>
                </el-divider>
                <!--                <div style="display:flex;justify-content:space-between;flex-wrap:wrap">
                    <div style="width: 50%" v-for="(item,index) in books" :key="index">
                        <el-card style="margin: 5px;" body-style="display:flex">
                            <div style="width: 30%;cursor: pointer" v-on:click="toDetail(item.bookId)">
                                <img :src="item.imageUrl" class="image">
                            </div>
                            <div style="width:70%">
                                <div style="height: 120px">
                                    <p style="font-weight: bolder">{{item.name}}</p>
                                    <p><span>{{item.author}}</span>/<span>{{item.press}}</span></p>
                                </div>
                                <el-button-group>
                                    <el-button size="small" plain type="primary" @click="addtoCart(item.bookId)">加入购物车</el-button>
                                    <el-button size="small" plain type="danger">直接购买</el-button>
                                </el-button-group>
                            </div>
                        </el-card>
                    </div>
                </div>-->
                <book-list :book-list="books" @updateList="update"></book-list>
            </el-card>
        </div>
        <el-dialog title="购买数量" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-card style="margin: 5px;" body-style="display:flex">
                <img :src="bookDetail.imageUrl" class="image">
                <div style="width: 70%">
                    <div style="height: 120px">
                        <p style="font-weight: bolder">{{ bookDetail.name }}</p>
                        <p><span>{{ bookDetail.author }}</span>/<span>{{ bookDetail.press }}</span></p>
                        <el-input-number size="small" v-model="buyCount" :min="1"></el-input-number>
                    </div>
                </div>
            </el-card>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="directPay(bookDetail.bookId, buyCount)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import global from "../../global";
import axios from 'axios'
import BookList from "../../reusable/BookList";
export default {
    name: "bookDetail",
    components: { BookList },
    data() {
        return {
            dialogVisible: false,
            bookId: this.$route.query.bookId,
            bookDetail: {},
            books: [],
            buyCount: 1
        }
    },
    mounted() {
        this.getBookInfo()
        /*            this.getList(10)*/
        console.log(this.bookId)
    },
    methods: {
        beginBuy() {
            this.buyCount = 1
            this.dialogVisible = true
        },
        handleClose() {
            this.dialogVisible = false
        },
        async directPay(bookId, count) {
            let mydata = {
                uid: sessionStorage.getItem("userId"),
                bookId: bookId,
                count: count
            }
            axios.post('/cart/directPay', mydata).then((res) => {
                console.log(res)
                if (res.data.code === 0 || res.data.code == 200) {
                    this.$message.success("成功")

                }
            })
            this.handleClose()
        },
        async addtoCart(bookId) {
            let mydata = {
                uid: sessionStorage.getItem("userId"),
                bookId: bookId,
                count: 1
            }
            console.log(mydata)
            axios.post('/cart/addBook', mydata, {
                headers: {
                    bookId: mydata.bookId,
                    userId: window.sessionStorage.getItem("userId")
                }
            }).then((res) => {
                console.log(res)
                if (res.data.code === 0 || res.data.code === 200) {
                    this.$notify.success("加入购物车成功")
                }
            })
        },
        update() {
            /*this.$router.push({ path:'/home/bookdetail', query:{ bookId:param } })*/
            this.getBookInfo()
            /*this.getListByCategories(10,this.bookDetail.bookCategoryId)*/
        },
        async getList(size) {
            let mydata = {
                page: global.methods.getRandomInt(10, 200),
                size: size
            }
            axios.post('/api/book/searchBookByPage', mydata).then((res) => {
                this.books = res.data.data
                console.log(this.books)
            })
        },
        async getListByCategories(size, category) {
            let mydata = {
                page: global.methods.getRandomInt(0, 100),
                size: size,
                cateIds: [category]
            }
            axios.post('/api/book/searchBookByCategory', mydata).then((res) => {
                this.books = res.data.data[0]
                console.log(this.books)
            })
        },
        async recommend(size, bookId) {
            let mydata = {
                bookId: bookId,
                page: global.methods.getRandomInt(0, 15),
                size: size,
            }
            console.log(mydata)
            axios.post('/recommend/1', mydata).then((res) => {
                this.books = res.data.data
                console.log(this.books)
            })
        },
        async recommend2(size, bookId) {
            let mydata = {
                bookId: bookId,
                page: global.methods.getRandomInt(0, 15),
                size: size,
            }
            console.log(mydata)
            axios.post('/recommend/2', mydata).then((res) => {
                this.books = res.data.data
                console.log(this.books)
            })
        },
        async getBookInfo() {
            let mydata = {
                bookId: this.$route.query.bookId,
            }
            axios.post('http://120.46.132.13:8081/api/book/search', mydata, {
                headers: {
                    bookId: this.$route.query.bookId,
                    userId: window.sessionStorage.getItem("userId")
                }
            }).then((res) => {
                console.log(res)
                this.bookDetail = res.data.data;
                let cateId = this.bookDetail.bookCategoryId
                console.log(cateId)
                /*                    this.getListByCategories(10,cateId)*/
                this.recommend(10, this.bookId.toString())
            })
        }
    }
}
</script>

<style scoped>
.container {
    width: 100%;
}

.image {
    height: 180px;
    width: 150px;
}
</style>
